<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig 3.67</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style for hand-drawn look
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.font = '20px "Comic Sans MS", cursive, sans-serif';

        function drawResistor(x, y, width, height, label, orientation) {
            ctx.save();
            ctx.translate(x, y);
            if (orientation === 'vertical') {
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(0, height * 0.15);
                for (let i = 0; i < 6; i++) {
                    ctx.lineTo((i % 2 === 0 ? -1 : 1) * width / 2, height * (0.15 + 0.7 * (i + 0.5) / 6));
                }
                ctx.lineTo(0, height);
                ctx.stroke();
                ctx.fillText(label, width / 2 + 5, height / 2 + 5);
            } else { // horizontal
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(width * 0.15, 0);
                for (let i = 0; i < 6; i++) {
                    ctx.lineTo(width * (0.15 + 0.7 * (i + 0.5) / 6), (i % 2 === 0 ? -1 : 1) * height / 2);
                }
                ctx.lineTo(width, 0);
                ctx.stroke();
                ctx.fillText(label, width / 2 - 20, -height / 2 - 5);
            }
            ctx.restore();
        }
        
        function drawCapacitor(x, y, size, label) {
            ctx.save();
            ctx.translate(x, y);
            // Plate 1
            ctx.beginPath();
            ctx.moveTo(-size*0.2, -size);
            ctx.lineTo(-size*0.2, size);
            ctx.stroke();
            // Plate 2
            ctx.beginPath();
            ctx.moveTo(size*0.2, -size*0.8);
            ctx.quadraticCurveTo(size*1.2, 0, size*0.2, size*0.8);
            ctx.stroke();

            ctx.fillText(label, -size*0.2, -size-5);
            ctx.restore();
        }

        function drawTransistorNPN(x, y, size, label) {
            ctx.save();
            ctx.translate(x, y);
            // Base line
            ctx.beginPath();
            ctx.moveTo(-size, 0);
            ctx.lineTo(0, 0);
            ctx.stroke();
            // Collector/Emitter line
            ctx.beginPath();
            ctx.moveTo(0, -size * 1.2);
            ctx.lineTo(0, size * 1.2);
            ctx.stroke();
            // Emitter arrow
            ctx.beginPath();
            ctx.moveTo(0, size * 0.5);
            ctx.lineTo(size * 0.6, size * 0.8);
            ctx.moveTo(0, size * 0.5);
            ctx.lineTo(-size * 0.6, size * 0.8);
            ctx.stroke();
            // Label
            ctx.fillText(label, -size*2.5, size * 0.5);
            ctx.restore();
        }

        function drawGround(x, y, size) {
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x, y + size);
            ctx.moveTo(x - size, y + size);
            ctx.lineTo(x + size, y + size);
            ctx.moveTo(x - size*0.6, y + size*1.5);
            ctx.lineTo(x + size*0.6, y + size*1.5);
            ctx.moveTo(x - size*0.3, y + size*2);
            ctx.lineTo(x + size*0.3, y + size*2);
            ctx.stroke();
        }
        
        function drawTerminal(x, y, label) {
            ctx.beginPath();
            ctx.arc(x, y, 5, 0, 2 * Math.PI);
            ctx.fill();
            ctx.fillText(label, x + 10, y + 8);
        }

        // --- Main Drawing ---
        
        // Top rail
        ctx.beginPath();
        ctx.moveTo(100, 50);
        ctx.lineTo(550, 50);
        ctx.stroke();
        drawTerminal(550, 50, "-20V");

        // Q1 and its components
        drawResistor(150, 50, 15, 60, "5K", "vertical");
        ctx.beginPath();
        ctx.moveTo(150, 110);
        ctx.lineTo(150, 155);
        ctx.stroke();
        drawTransistorNPN(150, 190, 35, "Q₁");
        ctx.beginPath();
        ctx.moveTo(150, 225);
        ctx.lineTo(150, 320);
        ctx.stroke();
        drawGround(150, 320, 15);

        // Q2 and its components
        drawResistor(500, 50, 15, 60, "5K", "vertical");
        ctx.beginPath();
        ctx.moveTo(500, 110);
        ctx.lineTo(500, 155);
        ctx.stroke();
        // Custom transistor for right side
        ctx.save();
        ctx.translate(500, 190);
        ctx.scale(-1, 1);
        drawTransistorNPN(0, 0, 35, "Q₂");
        ctx.restore();
        ctx.beginPath();
        ctx.moveTo(500, 225);
        ctx.lineTo(500, 320);
        ctx.stroke();
        drawGround(500, 320, 15);
        
        // --- Cross Connections ---

        // C1 to B2 path
        ctx.beginPath();
        ctx.moveTo(150, 140);
        ctx.lineTo(250, 140);
        ctx.stroke();
        drawCapacitor(265, 140, 15, "C");
        ctx.beginPath();
        ctx.moveTo(280, 140);
        ctx.lineTo(350, 165); // Diagonal part
        ctx.lineTo(465, 165); // To base
        ctx.stroke();

        // 100K resistor to B2 path
        drawResistor(350, 50, 15, 60, "100K", "vertical");
        ctx.beginPath();
        ctx.moveTo(350, 110);
        ctx.lineTo(350, 165);
        ctx.stroke();
        
        // C2 to B1 path
        ctx.beginPath();
        ctx.moveTo(185, 190); // From B1
        ctx.lineTo(250, 190);
        ctx.stroke();
        drawResistor(310, 190, 120, 15, "50K", "horizontal");
        ctx.beginPath();
        ctx.moveTo(370, 190);
        ctx.lineTo(500, 175); // to C2
        ctx.stroke();
        
        // B1 to +6V path
        ctx.beginPath();
        ctx.moveTo(250, 190);
        ctx.lineTo(250, 230);
        ctx.stroke();
        drawResistor(250, 230, 15, 50, "25K", "vertical");
        ctx.beginPath();
        ctx.moveTo(250, 280);
        ctx.lineTo(250, 300);
        ctx.stroke();
        drawTerminal(250, 300, "+6V");

        // Figure Label
        ctx.font = 'bold 22px "Times New Roman", serif';
        ctx.fillStyle = 'black';
        ctx.fillText("Fig. 3.67", 250, 380);

    </script>
</body>
</html>